<template>
  <el-card shadow="always" style="margin-top: 10px">
    <div slot="header" class="header">
      <el-tabs class="demo-tabs" v-model="activeName">
        <el-tab-pane label="销售额" name="sale"></el-tab-pane>
        <el-tab-pane label="访问量" name="visite"></el-tab-pane>
      </el-tabs>
      <!--右侧结构-->
      <div class="right">
        <span @click="today">今日</span>
        <span @click="week">本周</span>
        <span @click="month">本月</span>
        <span @click="year">今年</span>
        <!--日历
          value-format:能决定收集数据的geshi
        -->
        <el-date-picker
          v-model="timeArr"
          type="daterange"
          range-separator="-"
          start-placeholder="入住时间"
          end-placeholder="离开时间"
          size="small"
          value-format="YYYY-MM-DD"
        />
      </div>
    </div>
    <!--卡片身体部分-->
    <el-row :gutter="20">
      <el-col :span="18" :offset="0">
        <v-chart
          :option="getOption()"
          style="height: 400px"
          autoresize
        ></v-chart>
      </el-col>
      <el-col :span="6" :offset="0">排序</el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import dayjs from "dayjs";
//选项卡数据
let activeName = ref("sale");
let timeArr = ref([]);
let today = () => {
  let start = dayjs().format("YYYY-MM-DD");
  let end = dayjs().format("YYYY-MM-DD");
  timeArr.value = [start, end];
};
//本周
let week = () => {
  let start = dayjs().day(1).format("YYYY-MM-DD");
  let end = dayjs().day(7).format("YYYY-MM-DD");
  timeArr.value = [start, end];
};
//本月日期
const month = () => {
  let start = dayjs().startOf("month").format("YYYY-MM-DD");
  let end = dayjs().endOf("month").format("YYYY-MM-DD");
  timeArr.value = [start, end];
};
//本年日期
const year = () => {
  let start = dayjs().startOf("year").format("YYYY-MM-DD");
  let end = dayjs().endOf("year").format("YYYY-MM-DD");
  timeArr.value = [start, end];
};

//左侧柱状图的配置项
const getOption = () => {
  return {
    title:{
        text:activeName.value =='sale' ? '销售量' :'访问量'
    },
    //提示组件
    tooltip:{
        trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "0",
      right: "0",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: props.x,
        axisTick: {
          alignWithLabel: true,
        },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: activeName.value == "sale" ? props.saleArr : props.visiteArr,
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
          //展示数值
          label:{
          show:true,
          //文本位置
          position:'top',
          //旋转
          rotate:20,
          color:'yellowgreen'
        }
      },
    ],
  };
};

let props = defineProps(["saleArr", "visiteArr", "x"]);
</script>

<style scoped>
.header {
  position: relative;
}
.right {
  position: absolute;
  right: 0;
  top: 10px;
}
.right span {
  margin: 0px 5px;
}
</style>